import MyCard from "@/components/card"
import useFindData from "@/hooks/useFindData";
import { App, Button, DatePicker, Form, Input, Modal, Select, Space, Switch } from "antd"
import { useEffect, useState } from "react";
import { FileSearchOutlined } from "@ant-design/icons"
import { Link } from "react-router";
import { addStaffsDataApi } from "@/api/staff";
const StaffForm = () => {
    const [form] = Form.useForm();
    const { getOrganization, organizationData, getPositionsHook, positionsData, getWorkPlaceHook, workplaceData,
        getNewestWorkNumberDataHook, workNumberData
    } = useFindData();
    const [open, setOpen] = useState(false);
    const { message } = App.useApp();
    useEffect(() => {
        getOrganization();
        getPositionsHook();
        getWorkPlaceHook();
        getNewestWorkNumberDataHook();
    }, [])


    //员工类型
    const workerType = [
        { label: '全职', value: '1' },
        { label: '兼职', value: '2' },
        { label: '实习', value: '3' },
        { label: '临时工', value: '4' },
    ]
    const workerState = [
        { label: '试用', value: '1' },
        { label: '正式', value: '2' },
        { label: '待离职', value: '3' },
        { label: '已离职', value: '4' },
        { label: '待入职', value: '5' },
    ]
    //打开弹窗 
    const onOpenForm = () => {
        setOpen(true);
    }

    //弹窗确认 新增/修改数据
    const onOK = async () => {
        setOpen(true);

    }
    //弹窗关闭
    const onCancel = () => {
        setOpen(false);
    }
    //弹窗确认 新增/修改数据
    const onFormOK = async () => {
        form.submit();
    }

    const onFormFinish = (values: any) => {
        console.log(values);
        addWorkplacesData(values);
    }
    //新增
    const addWorkplacesData = (data: any) => {
        addStaffsDataApi(data).then(res => {
            if (res.code == 200) {
                message.success('保存成功')
            } else {
                message.error(res.message)
            }
        })
    }

    return (
        <>
            <MyCard title="新增员工" >
                <Form form={form}
                    name="workplaceForm"
                    labelCol={{ style: { width: 80, height: 50, } }}
                    style={{ marginBottom: 20, borderBottom: '1px solid #f2f2f2', paddingBottom: 20 }}
                    onFinish={onFormFinish}
                    layout='inline'
                >
                    <Form.Item name="name" label="姓名" rules={[{ required: true, message: '姓名不能为空' }]}
                        style={{ width: 500 }}>
                        <Input style={{ width: 300 }}></Input>
                    </Form.Item>
                    <Form.Item label="工号" style={{ width: 500 }}>
                        <Input style={{ width: 300 }} disabled placeholder={(workNumberData.workNumber + 1) + ''}></Input>
                    </Form.Item>
                    <Form.Item name="organizations" label="部门组织" style={{ width: 500 }} rules={[{ required: true, message: '部门组织不能为空' }]}>
                        <Select options={organizationData.rows} fieldNames={{ label: "name", value: 'name', }}
                            placeholder="请选择" style={{ width: 300 }}></Select>
                    </Form.Item>
                    <Form.Item name="leader" label="上级负责人" style={{ width: 500 }}>
                        <Input
                            placeholder="请选择"
                            suffix={
                                <FileSearchOutlined style={{ color: '#bbb' }} />
                            }
                            style={{ width: 300 }}
                            onClick={() => {
                                onOpenForm();
                            }}
                        />
                    </Form.Item>
                    <Form.Item name="position" label="职位" style={{ width: 500 }}>
                        <Select options={positionsData.rows} fieldNames={{ label: "name", value: 'name', }}
                            placeholder="请选择" style={{ width: 300 }}></Select>
                    </Form.Item>
                    <Form.Item name="phone" label="手机号码" rules={[{ required: true, message: '手机号码不能为空' }]}>
                        <Input style={{ width: 300 }}></Input>
                    </Form.Item>
                    <Form.Item name="workplace" label="工作地点" style={{ width: 500 }}>
                        <Select options={workplaceData.rows} fieldNames={{ label: "name", value: 'name', }}
                            placeholder="请选择" style={{ width: 300 }}></Select>
                    </Form.Item>
                    <Form.Item name="city" label="工作城市" rules={[{ required: true, message: '工作城市不能为空' }]}>
                        <Input style={{ width: 300 }} ></Input>
                    </Form.Item>
                    <Form.Item name="type" label="员工类型" style={{ width: 500 }}>
                        <Select options={workerType}
                            placeholder="请选择" style={{ width: 300 }}></Select>
                    </Form.Item>
                    <Form.Item name="state" label="员工状态" style={{ width: 500 }}>
                        <Select options={workerState}
                            placeholder="请选择" style={{ width: 300 }}></Select>
                    </Form.Item>
                    <Form.Item name="entryDate" label="入职日期" style={{ width: 500 }}>
                        <DatePicker placeholder="请选择" style={{ width: 300 }}
                            showTime={{ format: 'HH:mm' }}
                            format="YYYY-MM-DD HH:mm"
                            onChange={(value, dateString) => {
                                console.log('Selected Time: ', value);
                                console.log('Formatted Selected Time: ', dateString);
                            }}
                        />
                    </Form.Item>
                    <Form.Item name="email" label="邮箱" style={{ width: 500 }}>
                        <Input style={{ width: 300 }}></Input>
                    </Form.Item>
                    <Form.Item name="state" label="员工状态" style={{ width: 500 }}>
                        <Switch defaultChecked checkedChildren="开启" unCheckedChildren="关闭" />
                    </Form.Item>
                </Form>
                <Space>
                    <Button type="primary" onClick={onFormOK}>保存</Button>
                    <Button color="primary" variant="outlined">保存并完善档案</Button>
                    <Button>
                        <Link to="/staff/roster/list">取消</Link>
                    </Button>
                </Space>
            </MyCard >
            <Modal

                open={open}
                onOk={onOK}
                onCancel={onCancel}
                forceRender={true}
                styles={{
                    content: {
                        padding: 0
                    },
                    footer: {
                        padding: 20
                    }
                }}
            >
                <div style={{ borderBottom: '1px solid #f2f2f2', height: 50 }}>
                    <span style={{ fontSize: 16, lineHeight: '50px', marginLeft: 20 }}>选择员工</span>
                </div>
                <div style={{ margin: 20 }}>
                    <Input.Search placeholder="请输入关键字">
                    </Input.Search>
                </div>
            </Modal>
        </>
    )
}

export default StaffForm